<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>

</head>

<body onload="initData();">


<h2 align="center" style="color: #ffffff;margin-top: 60px; text-shadow: 50px 20px 6px #FFFFFF; "> 监控系统</h2>

<div class="owin"></div>


<div height align="left" style="margin-top: 200px; margin-left: 100px" id="box1">

    <div>
        <span style="color: #ffffff;align-content: center"> 媒体服务开关 </span>
        <input type="checkbox" name="sex" id="male" class="chooseBtn" onchange="mediaServiceSwitch(1)"/>
        <label for="male" class="choose-label"></label> <br/> <br/>
    </div>

    <div>
        <span style="color: #ffffff;align-content: center;"> 媒体画面开关 </span>
        <input type="checkbox" name="sex1" id="male1" class="chooseBtn1" onchange="mediaServiceSwitch(2)"/>
        <label for="male1" class="choose-label1"></label> <br/> <br/>
    </div>

    <div>
        <span style="color: #ffffff"> 媒体音效开关 </span>
        <input type="checkbox" name="sex2" id="male2" class="chooseBtn2" onchange="mediaServiceSwitch(3)"/>
        <label for="male2" class="choose-label2"></label> <br/> <br/>
    </div>

    <div>
        <span style="color: #ffffff"> 媒体通讯开关 </span>
        <input type="checkbox" name="sex3" id="male3" class="chooseBtn3" onchange="mediaServiceSwitch(4)"/>
        <label for="male3" class="choose-label3"></label> <br/> <br/>
    </div>

    <div>
        <span style="color: #ffffff"> 禁用所有终端设备 </span>
        <input type="checkbox" name="sex4" id="male4" class="chooseBtn4" onchange="mediaServiceSwitch(5)"/>
        <label for="male4" class="choose-label4"></label> <br/> <br/>
    </div>

    <div>
        <span style="color: #ffffff"> 禁用所有媒体设备 </span>
        <input type="checkbox" name="sex5" id="male5" class="chooseBtn5" onchange="mediaServiceSwitch(6)"/>
        <label for="male5" class="choose-label5"></label> <br/> <br/>
    </div>

</div>


<div style="margin-left: 200px;  color: #ffffff" align="center" id="box2">

</div>


</body>

<style>

    /*按钮1*/
    .chooseBtn {
        display: none;
    }

    .choose-label {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn:checked + label.choose-label:before {
        left: 20px;
    }

    .chooseBtn:checked + label.choose-label {
        background-color: #000000;
    }

    /*按钮2*/
    .chooseBtn1 {
        display: none;
    }

    .choose-label1 {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label1:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn1:checked + label.choose-label1:before {
        left: 20px;
    }

    .chooseBtn1:checked + label.choose-label1 {
        background-color: #000000;
    }

    /*按钮3*/
    .chooseBtn2 {
        display: none;
    }

    .choose-label2 {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label2:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn2:checked + label.choose-label2:before {
        left: 20px;
    }

    .chooseBtn2:checked + label.choose-label2 {
        background-color: #000000;
    }

    /*按钮4*/
    .chooseBtn3 {
        display: none;
    }

    .choose-label3 {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label3:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn3:checked + label.choose-label3:before {
        left: 20px;
    }

    .chooseBtn3:checked + label.choose-label3 {
        background-color: #000000;
    }

    /*按钮5*/
    .chooseBtn4 {
        display: none;
    }

    .choose-label4 {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label4:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn4:checked + label.choose-label4:before {
        left: 20px;
    }

    .chooseBtn4:checked + label.choose-label4 {
        background-color: #000000;
    }

    /*按钮6*/
    .chooseBtn5 {
        display: none;
    }

    .choose-label5 {
        box-shadow: #ccc 0px 0px 0px 1px;
        width: 40px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        position: relative;
        background-color: #bdbdbd;
        overflow: hidden;
    }

    .choose-label5:before {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 20px;
        background-color: #fff;
        z-index: 20;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .chooseBtn5:checked + label.choose-label5:before {
        left: 20px;
    }

    .chooseBtn5:checked + label.choose-label5 {
        background-color: #000000;
    }

    .owin {
        width: 200px;
        height: 2px;
        background-color: #ffffff;
        margin: 10px auto;
        -webkit-animation: rotateplane 2.2s infinite ease-in-out;
        animation: rotateplane 2.2s infinite ease-in-out;
    }

    body {
        background-image: url(img/vv.jpg);
    }

    @-webkit-keyframes rotateplane {
        0% {
            -webkit-transform: perspective(120px)
        }
        50% {
            -webkit-transform: perspective(120px) rotateY(180deg)
        }
        100% {
            -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
        }
    }

    @keyframes rotateplane {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
        }
        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
        }
        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

    #box1 {
        width: 200px;
        height: 200px;
        position: relative
    }

    #box2 {
        width: 1700px;
        height: 600px;
        position: absolute;
        right: 0;
        bottom: 0
    }


</style>


<script src="jquery-3.3.1.min.js"></script>
<script src="Concant.js"></script>
<script>
    var result;
    var modularid = 101;
    var media_service;
    var media_ui;
    var media_vioce;
    var media_cancat;
    var media_all_finaldevice;
    var media_all_mediadevice;
    var field_switchType;

    /**
     * 媒体服务开关
     */
    function mediaServiceSwitch(i) {

        switch (i) {
            case 1:
                field_switchType = reversal(media_service);
                break;
            case 2:
                field_switchType = reversal(media_ui);
                break;
            case 3:
                field_switchType = reversal(media_vioce);
                break;
            case 4:
                field_switchType = reversal(media_cancat);
                break;
            case 5:
                field_switchType = reversal(media_all_finaldevice);
                break;
            case 6:
                field_switchType = reversal(media_all_mediadevice);
                break;
        }


        $.ajax({
            type: "GET",
            async: false,
            url: MANAGERMEDIASWITCHUPDATEURL + "?modularID=" + modularid + "&switchID=100" + i + "&switchType=" + field_switchType + "",
            dataType: "json",
            success: function (json) {
                var rest = eval(json);
                alert(rest["msg"])
            },
            error: function (data) {
                alert("连接错误...")
            }
        });
    }

    /**
     * 媒体服务开关
     */
    function initData() {

        $.ajaxSetup({
            cache: false
        })


        $.ajax({
            type: "GET",
            async: false,
            Cache: false,
            url: MANAGERMEDIASWITCHURL + "?modularID=101",
            dataType: "json",
            success: function (json) {
                var rest = eval(json);
                if (rest["code"] == 200) {
                    result = eval(rest["data"]);
                    modularid = result["modularid"] //项目ID

                    media_service = result["media_service"];
                    media_ui = result["media_ui"];
                    media_vioce = result["media_vioce"];
                    media_cancat = result["media_cancat"];
                    media_all_finaldevice = result["media_all_finaldevice"];
                    media_all_mediadevice = result["media_all_mediadevice"];

                    $("#male").attr("checked", isZone(media_service));
                    $("#male1").attr("checked", isZone(media_ui));
                    $("#male2").attr("checked", isZone(media_vioce));
                    $("#male3").attr("checked", isZone(media_cancat));
                    $("#male4").attr("checked", isZone(media_all_finaldevice));
                    $("#male5").attr("checked", isZone(media_all_mediadevice));
                } else {
                    alert(result["msg"])
                }
            },
            error: function () {
                alert("连接错误...")
            }
        });


        $.ajax({
            type: "GET",
            async: false,
            Cache: false,
            url: MONITORINGLOG + "?modularID=104",
            dataType: "json",
            success: function (json) {
                var rest = eval(json);
                if (rest["code"] == 200) {
                    result = eval(rest["data"]);

                    var html = '<table border="1" style="border-color: #ffffff" id="table1">';
                    html += '<tr>'
                    html += '<td  style="padding: 10px;font-weight: bold" width="80px" align="center">日志编号</td>';
                    html += '<td  style="padding: 10px ;font-weight: bold" width="80px" align="center">所属模块</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">抓拍时间</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">设备编号</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">图片大小</td>';
                    html += '<td  style="padding: 10px ;font-weight: bold" width="80px" align="center">图片分辨率</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">快门速度</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">照片展示</td>';
                    html += '<td  style="padding: 10px; font-weight: bold" width="80px" align="center">操作</td>';
                    html += '</tr>'


                    for (var j in result) {
                        var obj = result[j];
                        html += '<tr>'
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.log_id + '</td>';
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.modular_id + '</td>';
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.happen_time + '</td>';
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.divice_id + '</td>';
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.pic_size + '</td>';
                        html += '<td style="padding: 1px" width="120px" align="center">' + obj.pic_resolution + '</td>';
                        html += '<td style="padding: 1px" width="230px" align="center">' + obj.shutter_speed + '</td>';
                        html += '<td style="padding: 1px" width="100px" align="center"> <img  src="' + BASEIMGURL + '' + obj.img + '" width="80px" height="80px" style="padding: 5px"  onclick="window.open("' + BASEIMGURL + '' + obj.img + '")/> </td>';
                        html += '<td style="padding: 1px" width="230px" align="center">' + obj.is_look + '</td>';
                        html += '</tr>'
                    }
                    html += '</table>';
                    $('#box2').append(html);


                } else {
                    alert(result["msg"])
                }
            },
            error: function () {
                alert("连接错误...")
            }
        });


    }


    /**
     * 是否真假
     * @param i
     */
    function isZone(i) {

        if (i == 1) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 反转
     */
    function reversal(i) {
        if (i == 1) {
            return 0;
        } else {
            return 1;
        }
    }

</script>

</html>